import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Text,
    ScrollView,
    Image,
    TouchableOpacity,
    DeviceEventEmitter
} from 'react-native'
import NavBar from 'src/components/navBar'
import IdentifyProgress from '../components/IdentityProgress'
import UploadIdCard from '../components/UploadIdCard'
import UploadTips from '../components/UploadTips'
import Input from '../components/Input'
import {deviceHeight, deviceWidth, changeId} from "src/util"
import ActionSheet from 'react-native-actionsheet'
import {uploadCardImage} from "src/service/Auth"
import ImagePicker from 'react-native-image-crop-picker'
import Layer from "src/components/Layer"
import {inject} from "mobx-react/native"
import navigationhelper from "src/components/navigationhelper"
import Divider from "src/components/Divider"


@inject('userAuth')
export default class UserIdentity extends Component<{}> {
    constructor (props) {
        super(props)
        this.state = {
            step: 1,
            name: '',
            idcard: '',
            bankcard: '',
            phone: '',
            smsCode: ''
        }
    }
    componentWillMount(){
    }

    renderView = () => {
        switch (this.state.step) {
            case 1:{
                return (
                    <ScrollView style={styles.container}>
                        <NavBar 
                        back={()=>{navigationhelper.goBack() }}
                        title="实名认证"/>
                        <IdentifyProgress step={this.state.step}/>
                        <UploadIdCard style={{marginTop: 17}} callBack={(info) => {
                            this.setState({
                                name: info.name,
                                idcard: info.idcard
                            })
                        }}/>
                        <UploadTips
                            style={{marginTop: 12, marginRight: 16, marginBottom: 12, marginLeft: 16, borderRadius: 5}}/>
                        <Input title="真实姓名" isInput placeholder="请输入姓名" onChangeText={(text) =>{
                            this.setState({
                                name: text
                            })
                        }} data={this.state.name}/>
                        <Divider style={{ marginLeft: 16 }} />
                        <Input title="身份证号" isInput placeholder="请输入身份证号" onChangeText={(text) =>{
                            this.setState({
                                idcard: text
                            })
                        }} data={this.state.idcard}/>

                    </ScrollView>
                )
            }
            case 2: {
                return (
                    <ScrollView style={styles.container}>
                        <NavBar
                            back={()=>{navigationhelper.goBack() }}
                            title="实名认证"/>
                        <IdentifyProgress step={this.state.step}/>
                        <Input title="真实姓名" isLabel text={this.state.name}/>
                        <Divider style={{ marginLeft: 16 }} />
                        <Input title="身份证号" isLabel text={changeId(this.state.idcard)}/>
                        <Divider style={{ marginLeft: 16 }} />
                        <Input title="储蓄卡号" isInput data={this.state.bankcard} placeholder="请输入储蓄卡卡号" 
                             onChangeText={(text) => {
                               this.setState({
                                bankcard:text
                               })
                             }}
                               havePhotoButton
                               PhotoCallback={()=>{
                                   this.ActionSheet.show()
                               }}/>
                        <Divider style={{ marginLeft: 16 }} />
                        <Input title="手机号码" isInput placeholder="请输入银行预留手机号码" onChangeText={(text) => {
                            this.setState({
                                phone: text
                            })
                        }}/>
                        {/* <Divider style={{ marginLeft: 16 }} /> */}
                        {/* <Input title="验证码" isInput placeholder="请输入短信验证码" haveSmsCodeButton phone={this.state.phone}
                               onChangeText={(text) => {
                                   this.setState({
                                       smsCode: text
                                   })
                               }}/> */}
                    </ScrollView>
                )
            }
            case 3: {
                return (
                    <ScrollView style={styles.container}>
                        <NavBar 
                        back={()=>{navigationhelper.goBack() }}
                        title="实名认证"/>
                        <IdentifyProgress step={this.state.step}/>
                        <View style={{display: 'flex', marginTop: 65, alignItems: 'center', justifyContent: 'center'}}>
                            <Image source={require('src/assets/mine/IdentifyDone.png')}/>
                            <Text style={{fontSize: 20, lineHeight: 28, marginTop: 36, color: '#2E2E2E', fontFamily: 'PingFang SC'}}>
                                认证完成
                            </Text>
                            {/* <Text style={{fontSize: 13, lineHeight: 16, marginTop: 9, color: '#8E8E93', fontFamily: 'PingFang SC'}}>
                                即将跳到设置支付密码页面
                            </Text> */}
                        </View>
                    </ScrollView>
                )
            }
            default: {
                return null
            }
        }
    }

    render() {
        return (
            <View style={styles.container}>
                {
                    this.renderView()
                }
                {this.state.step < 3 && <TouchableOpacity style={styles.button} onPress={() => {
                    if(this.state.step === 2) {
                        //去认证
                        Layer.showLoading()
                        return this.props.userAuth.auth({
                            name: this.state.name,
                            id_card: this.state.idcard,
                            bank_card: this.state.bankcard,
                            mobile: this.state.phone,
                            token: this.props.userAuth.token,
                            // validate_code: this.state.smsCode
                        }).then((res)=>{
                            Layer.hiddenLoading()
                            if(res.status == 'success'){
                                this.props.userAuth.fetchCurrentUserInfo({token: this.props.userAuth.token})
                                DeviceEventEmitter.emit('refreshUserInfoIdentity')
                                // 修改用户信息
                                this.setState({
                                    step: this.state.step + 1
                                })
                            }
                        }).catch((error) => {
                            Layer.hiddenLoading()
                            Layer.showMsg(error.message)
                        })
                    }
                    if (this.state.step === 1) {
                        if(this.state.name.length === 0 || this.state.idcard.length !== 18){
                            return Layer.showMsg('请填写完整信息')
                        }
                    }
                    return this.setState({
                        step: this.state.step + 1
                    })
                }}>
                    <View>
                        <Text style={styles.buttonText}>{this.state.step !== 2 ? '下一步' : '开始认证'}</Text>
                    </View>
                </TouchableOpacity>}
                <ActionSheet
                    ref={o => this.ActionSheet = o}
                    options={['拍照', '从手机相册选择', '取消']}
                    cancelButtonIndex={2}
                    onPress={(index) => {
                        var promise = undefined
                        if(index === 0) {
                            promise = ImagePicker.openCamera({
                                width: 300,
                                height: 400,
                                cropping: true,
                            })
                        }else if(index == 1) {
                            promise = ImagePicker.openPicker({
                                width: 300,
                                height: 400,
                                cropping: true
                            })
                        }
                        if(promise){
                            promise.then(image => {
                                Layer.showMsg('开始上传')
                                uploadCardImage({
                                    image: image,
                                    token: this.props.userAuth.token,
                                }).then((res) => {
                                    this.setState({
                                        bankcard: res.data.bank_card_number
                                    })
                                })
                            })
                        }
                    }}
                />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: deviceHeight,
        backgroundColor: '#F5F5F5'
    },
    navButton: {
        display: 'flex',
        width: 100,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'flex-end'
    },
    button: {
        backgroundColor: '#ff2121',
        borderRadius: 5,
        width: deviceWidth - 32,
        height: 50,
        // position: 'absolute',
        left: 16,
        marginBottom: 20,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    },
    buttonText: {
        color: '#FFFFFF',
        fontSize: 16,
        lineHeight: 22,
        fontFamily: 'PingFang SC'
    }
})